import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from "@angular/core";
import {Router} from "@angular/router";
import {MyhttpService} from "../myhttp.service";
import {CommService} from "../comm-service";
import {LocalStorageService} from "../local-storage-service";
import {SharedService} from "../shared-service";

declare var $: any;

@Component({
  selector: 'sjgzxin-title',
  template: `
    <div class="topbar-wrap">
      <div class="topbar-wrap_left">{{titlev}}</div>
      <div class="topbar-wrap_right" *ngIf="pageiconlistAll.length">
        <ng-container *ngFor="let pageicon of pageiconlist">
          <div *ngIf="pageicon.page==='zszhzs'" class="fl pagebtn" [class.pagebtnActive]="pageicon.active"
               (click)="goto(pageicon);">
            <div [ngClass]="{'zszhzsclass':!pageicon.active,'zszhzsclassing':pageicon.active}"
                 class="bgdiv" [title]="pageicon.mc"></div>
            <div class="pagemc" [class.pagemcActive]="pageicon.active">{{pageicon.mc}}</div>
          </div>
          <div *ngIf="pageicon.page==='zsywcl'" class="fl pagebtn" [class.pagebtnActive]="pageicon.active"
               (click)="goto(pageicon);">
            <div [ngClass]="{'zsywclclass':!pageicon.active,'zsywclclassing':pageicon.active}"
                 class="bgdiv" [title]="pageicon.mc"></div>
            <div class="pagemc" [class.pagemcActive]="pageicon.active">{{pageicon.mc}}</div>
          </div>
          <div *ngIf="pageicon.page==='zsbmskd'" class="fl pagebtn" [class.pagebtnActive]="pageicon.active"
               (click)="goto(pageicon);">
            <div [ngClass]="{'zsbmskdclass':!pageicon.active,'zsbmskdclassing':pageicon.active}"
                 class="bgdiv" [title]="pageicon.mc"></div>
            <div class="pagemc" [class.pagemcActive]="pageicon.active">{{pageicon.mc}}</div>
          </div>
          <div *ngIf="pageicon.page==='zstjbb'" class="fl pagebtn" [class.pagebtnActive]="pageicon.active"
               (click)="goto(pageicon);">
            <div [ngClass]="{'zstjbbclass':!pageicon.active,'zstjbbclassing':pageicon.active}"
                 class="bgdiv" [title]="pageicon.mc"></div>
            <div class="pagemc" [class.pagemcActive]="pageicon.active">{{pageicon.mc}}</div>
          </div>
          <div *ngIf="pageicon.page==='backctr'" class="fl pagebtn" [class.pagebtnActive]="pageicon.active"
               (click)="goto(pageicon);">
            <div [ngClass]="{'backctrclass':!pageicon.active,'backctrclassing':pageicon.active}"
                 class="bgdiv" [title]="pageicon.mc"></div>
            <div class="pagemc" [class.pagemcActive]="pageicon.active">{{pageicon.mc}}</div>
          </div>
        </ng-container>
      </div>

      <div class="topbar_gjxx pagebtn">
        <div class="gjIcon" [style.color]="ssgjsl!='0'?'red':'#ccc'" (click)="gotogjInfo()">
          <i class="fa fa-bell"></i>
          <div class="iconbeg">{{ssgjsl}}</div>
        </div>
      </div>
    </div>

  `,
  styles: [
    ".topbar-wrap{position: relative;width: 1920px; height: 58px;line-height: 58px;background-color: #0050c3;padding: 0;}",
    ".topbar-wrap_left{float: left;color: #fff;font-weight: 800;font-size: 20px;padding-left: 10px;width: 500px;}",
    ".topbar_gjxx{float: right;}",
    ".topbar-wrap_right{float: right; width: auto;}",
    // 告警信息
    ".topbar_gjxx>.gjIcon{position: relative;width: 40px;height: 40px;line-height: 40px;text-align: center;font-size: 25px}",
    ".gjIcon>.iconbeg{position: absolute;width: 25px;height: 25px;right: -10px;top: -5px;text-align: center;line-height: 20px;font-size: 15px;padding: 2px; background-color: #ffffff;border-radius: 50%}",
    // 菜单图标和字体
    ".bgdiv{background-size: 100% 100%;background-repeat: no-repeat}",
    ".pagebtn{width: auto;margin-right: 30px;height: 40px;border-radius: 5px;margin-top: 9px;padding: 0px 10px;cursor: pointer}",
    ".pagebtnActive{background-color: #ffffff}",
    ".pagemc{color: #ffffff;float: left;height: 40px;line-height: 40px}",
    ".pagemcActive{color: #0050c3}",
    // 综合展示
    ".zszhzsclass{float: left; margin-right: 20px; width: 22px;height: 20px;margin-top: 10px;background-image: url('assets/img/sjgz/p_zs.png');}",
    ".zszhzsclassing{float:left;margin-right: 20px; width: 22px;height: 20px;margin-top: 10px;background-image: url('assets/img/sjgz/p_zs_active.png');}",
    // 押运车辆
    ".zsywclclass{float: left; margin-right: 20px; width: 22px;height: 20px;margin-top: 10px;background-image: url('assets/img/sjgz/p_cl.png');}",
    ".zsywclclassing{float: left; margin-right: 20px; width: 22px;height: 20px;margin-top: 10px;background-image: url('assets/img/sjgz/p_cl_active.png');}",
    // 保密室及考点
    ".zsbmskdclass{float: left; margin-right: 20px; width: 22px;height: 20px;margin-top: 10px;background-image: url('assets/img/sjgz/p_bmskd.png');}",
    ".zsbmskdclassing{float: left; margin-right: 20px; width: 22px;height: 20px;margin-top: 10px;background-image: url('assets/img/sjgz/p_bmskd_active.png');}",
    // 统计报表
    ".zstjbbclass{float: left; margin-right: 20px; width: 22px;height: 20px;margin-top: 10px;background-image: url('assets/img/sjgz/p_tjbb.png');}",
    ".zstjbbclassing{float: left; margin-right: 20px; width: 22px;height: 20px;margin-top: 10px;background-image: url('assets/img/sjgz/p_tjbb_active.png');}",
    // 返回首页
    ".backctrclass{float: left; margin-right: 20px; width: 22px;height: 20px;margin-top: 10px;background-image: url('assets/img/sjgz/p_backctr.png');}",
    ".backctrclassing{float: left; margin-right: 20px; width: 22px;height: 20px;margin-top: 10px;background-image: url('assets/img/sjgz/p_backctr_active.png');}",
  ]

})

export class Sjgzxin_titleComponent implements OnInit, OnDestroy {
  titlev: string = "";
  csid: string = "";
  //菜单权限
  pageiconlistAll: any[] = [{
    page: "zszhzs", //匹配当前路由页面，处理图标
    mc: "综合展示",
    url: "zszhzs",
    active: false,
  }, {
    page: "zsywcl",
    mc: "押运车辆",
    url: "zsywcl",
    active: false,
  }, {
    page: "zsbmskd",
    mc: "保密室及考点",
    url: "zsbmskd",
    active: false,
  }, {
    page: "zstjbb",
    mc: "统计报表",
    url: "zstjbb",
    active: false,
  }];
  pageiconlist: any[] = [];
  sysBase: string;
  ssgjsl: string = "0";
  ssgjsl_lockid: any;
  s_gjslobj: any = {
    kssj: ""
  }


  /**
   * 左侧页面
   */
  initIcons(): void {
    const frompage = this.o.frompage;  // active icon
    const aestr_mtmenus = this.localStorageService.get("mtmenus");
    if (!aestr_mtmenus) {
      this.commservice.myswal("warning", "没有该模块任何页面访问权限", "检查用户菜单权限", "ts", null);
      return
    }
    const dastr_mtmenus = this.commservice.daesString(aestr_mtmenus);
    const resp = JSON.parse(dastr_mtmenus); // name url id
    if (resp && resp.length) {
      const hasPages_url = resp.map((item) => {
        const url = item.url; // fzjc_路由
        return url;
      });
      this.pageiconlist = this.pageiconlistAll.filter((item) => {
        return (hasPages_url.indexOf(item.url) != -1);
      });
      // 增加一个返回按钮
      this.pageiconlist.push({
        page: "backctr",
        mc: "返回",
        url: "backctr",
      });
      this.pageiconlist.forEach((item) => {
        if (item.page === frompage) {
          item.active = true;
        }
      });
    } else {
      this.commservice.myswal("warning", "没有该模块任何页面访问权限", "检查用户菜单权限", "ts", null);
    }
  }


  /**
   * 页面跳转
   * @param pageicon
   */
  goto(pageicon: any): void {
    if (pageicon.active) {
      //轨迹回放  和  押运车辆/考点保密室页面公用焦点
      // return
    }
    const routuerurl = pageicon.url;
    // this.commservice.blockUI({
    //   target: ".main_out",
    //   boxed: true,
    //   message: "页面加载中...",
    //   zIndex: 10051,
    //   overlayColor: "#196990"
    // });
    if (routuerurl == "backctr") {
      this.router.navigate(["ctrzj"]);
    } else {
      this.router.navigate(["sjgzxin.zs", routuerurl]);
    }
  }

  /**
   * 获取实时告警数量
   */
  getssgjsl(): void {
    this.commservice.log("实时告警数量获取，请求开始时间", this.s_gjslobj.kssj);
    this.ssgjsl = "0";
  }

  gotogjInfo(): void {
    if (this.ssgjsl) {
      this.router.navigate(["sjgzxin.zs", "zstjbb", "gjxq"]);
    }
  }

  @Input() o: any;
  @Output() outhander: EventEmitter<any> = new EventEmitter<any>();

  constructor(private router: Router,
              private itservice: MyhttpService,
              private commservice: CommService,
              private localStorageService: LocalStorageService,
              private sharedService: SharedService) {
    this.sharedService.changeEmitted$.subscribe(resp => {
      const actiontype = resp.actiontype;
      if (actiontype == "sendggsl") {
        this.localStorageService.remove("firstime");
        this.s_gjslobj.kssj = this.commservice.YMDHMS_get(false);
        this.localStorageService.set("firstime", this.s_gjslobj.kssj);
        this.ssgjsl = "0";
      }
    });
  }

  ngOnInit() {
    if (this.ssgjsl_lockid) {
      clearInterval(this.ssgjsl_lockid);
    }
    const firstTime = this.localStorageService.get("firstime");
    if (!firstTime) {
      this.s_gjslobj.kssj = this.commservice.YMDHMS_get(false);
      this.localStorageService.set("firstime", this.s_gjslobj.kssj);
    } else {
      this.s_gjslobj.kssj = firstTime;
    }
    this.getssgjsl();
    // this.ssgjsl_lockid = setInterval(() => {
    //   this.getssgjsl();
    // }, 10000);

    this.commservice.getUserinfo((resp) => {
      this.csid = resp.csid;
    });
    this.commservice.getSysmsg2((resp) => {
      if (resp) {
        this.sysBase = resp.sysBase;
      }
    });
    this.commservice.getmbzd("gj_xzqhdmb", (resp) => {
      if (resp) {
        const xzbmArr = resp[0];
        let xzmbmc: string = "";
        xzbmArr.forEach((item) => {
          if (item.DM == this.csid) {
            xzmbmc = item.MC;
          }
        });
        //this.titlev = `${xzmbmc}教育考试试卷跟踪展示平台`;
        this.titlev = "汉尚全域定位系统V1.0";
      }
    });
    this.initIcons();
  }

  ngOnDestroy() {
    if (this.ssgjsl_lockid) {
      clearInterval(this.ssgjsl_lockid);
    }
  }

}
